<!-- 聊天备份 -->
<template>
  <div class="dashboard-editor-container">
		<el-row style="background: #fff; padding: 8px 16px 0;">
      <div class="xxx" style="display:flex;margin-top: 10px;">
        <div class="lefttree" style="height:calc(100vh - 86px);">
          <div class="tabclick">
            <!-- <div class="tabitem" @click="handleClick()">
              <span><i :class="tab1 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
            </div> -->
          </div>
          <!-- icon-class="el-icon-arrow-right"  -->
          <el-tree 
            ref="tree"
            v-show="tab1" 
            node-key="label" 
            :data="CustomerList" 
            :expand-on-click-node=false 
            :props="defaultProps" 
            @node-click="handleNodeClick"  
            default-expand-all	
            :default-expanded-keys="[1]" 
            highlight-current
            style="width:200px;">
            <span slot-scope="{ node }" class="custom-tree-node">
              <span>
                <i v-if="node.level > 1" class="el-icon-picture" style="margin-right: 10px;" />
                <i v-else class="el-icon-folder-opened" style="margin-right: 10px;" />
                <span class="tree-text">{{ node.label }}{{ node.Count }}</span>
              </span>
            </span>
          </el-tree>
          <!-- :render-content="renderContent" -->
        </div>
        <div style="width:100%">
          <div class="playbackSettings" style="display:flex;justify-content: space-between;">
            <div style="font-size:14px;color:#606266;">
              自动播放时间间隔：<el-input v-model.number="time" @change="timeChange" style="width:100px"></el-input>秒
              <el-button @click="autoPlay" :type="isautoPlay === true ? 'primary' : 'primary'" plain>自动播放</el-button>
              <el-button @click="stopPlaying" type="warning">停止播放</el-button>
              <!-- <el-button @click="fullScreenPlayback">全屏自动播放</el-button> -->
            </div>
            <el-button type="primary" @click="$router.go(-1)">返回</el-button>
          </div>
          <!-- <div > -->
            <el-image
              lazy
              v-for="(item,index) in tableData" :key="index"
              ref="image"
              style="width: 100%;"
              :src="item.ResFileName"
              v-if="timeStamp === item.TransTime"
              :preview-src-list = previewSrcList
              >
            </el-image>
          <!-- </div> -->
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { getNowDay, parseTime, getTreeData, ParamDictURLtype, Maintype } from '@/utils/index.js';
import { connrequest } from '@/api/firstPage.js';
import connsearch from "@/components/connSearch";
import barchart from "./components/barchart.vue";
import piechart from "./components/piechart.vue";
let timer
export default {
  components: { connsearch, barchart, piechart },
  data() {
    return {
      time: 3,
      timeStamp: '',
      tableData:[],
      pageNum: 1,
      pageSize: 10000,
      // pageSize: 10,
      total: 0,
      tab: false,
      tab1: true,
      isautoPlay: false,
      CustomerList:[],
      previewSrcList:[],
      tab2: false,
      searchform:{},
      defaultProps:{
        children: 'children',
        label: 'label'
      },
      formOptions:[
        {
          col: 12,
          label: "日期",
          prop: "timeRange",
          element: "el-date-picker",
          initValue: [],
          type: ""
        }
      ]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // let xTime = new Date().getTime()
    // let endTime = new Date(new Date().setHours(0, 0, 0, 0))
    // let startTime = endTime - (Cookies.get('DefaultLogDays') * 1 * 3600 * 24 * 1000);
    // // let arr = [ parseTime(startTime), parseTime(xTime)]
    // let arr = [ parseTime(xTime), '']
    // this.formOptions.map( item => {
    //   if(item.label === '日期'){
    //     item.initValue = arr
    //   }
    // })
    // this.$set(this.searchform,'timeRange', arr)
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  beforeDestroy() {
    clearInterval(timer)
  },
  methods:{
    getData(){
      this.GetScreenLog()
    },
    timeChange(){
      clearInterval(timer)
      // this.autoPlay()
    },
    fullScreenPlayback(){
      this.$message.info('该功能还在开发中，可点击图片查看大图')
      // console.log(this.$refs.image);
    },
    stopPlaying(){
      this.isautoPlay = false
      clearInterval(timer)
    },
    autoPlay(){
      clearInterval(timer)
      this.isautoPlay = true
      if(index > 0){
        this.handleNodeClick(this.CustomerList[0].children[index])
      }
      let index = this.index
      const length = this.CustomerList[0].children.length
      // 每隔3秒触发一次handleNodeClick函数
      timer = setInterval(() => {
        if (index >= length) {
          clearInterval(timer)
          index = 0
          this.handleNodeClick(this.CustomerList[0].children[index])
          this.$message.success('自动播放结束')
          return
        }
        this.handleNodeClick(this.CustomerList[0].children[index])
        index++
        let currentImage = document.querySelector(`[data-index="${this.timeStamp}"] .el-image__inner`);
        if (currentImage) {
          if (currentImage.requestFullscreen) {
            currentImage.requestFullscreen();
          } else if (currentImage.webkitRequestFullscreen) {
            currentImage.webkitRequestFullscreen();
          } else if (currentImage.msRequestFullscreen) {
            currentImage.msRequestFullscreen();
          }
        }
      }, this.time * 1000)
    },
    async handleNodeClick(item) {
      this.$nextTick(() => {
        this.index = item.index + 1
        this.$refs.tree.setCurrentKey(item.label);
        this.timeStamp = item.label
      })
    },
    // 获取屏幕录像
    async GetScreenLog(){
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          Name: this.$route?.query?.Name || '',
          TransDate: this.$route?.query?.TransTime || '',
          StartTime: this.$route?.query?.TransTime + '00:00:00' || '',
          EndTime: this.$route?.query?.TransTime + '23:59:59' || ''
        }
      }
      const res = await connrequest('GetScreenLog', data)
      let timeline = []
      let previewSrcList = []
      res.Data = res.Data || []
      res.Data.map( (item, index) =>{
        item.TransTime = parseTime(item.TransTime, '{y}-{m}-{d} {h}:{i}:{s}')
        const startIndex = item.ResFileName.indexOf('/screen_log/');
        const endIndex = item.ResFileName.length;
        const fileName = item.ResFileName.substring(startIndex, endIndex);
        item.ResFileName = fileName
        timeline.push({label: item.TransTime, level: 2, index})
        previewSrcList.push(fileName)
        return item;
      })
      this.CustomerList = [
        {
          label: this.$route.query.Name,
          level: 1,
          children:timeline
        }
      ]
      this.tableData = res.Data
      this.total = res?.Paging?.TotalCount
      this.previewSrcList = previewSrcList
      this.handleNodeClick(this.CustomerList[0].children[0])
    },
    search(val) {
      this.pageNum = 1
      this.searchform = {...val}
      this.getData()
    },
    handleClick() {
      this.tab = !this.tab
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
@import "./components/css/conncss.scss";
/* 设置垂直滚动条（如果需要水平滚动条，请添加::-webkit-scrollbar-horizontal选择器） */
::-webkit-scrollbar {
    width: 3px; /* 滚动条宽度 */
  }
  /* 滚动条轨道部分（即背景） */
  ::-webkit-scrollbar-track {
    background-color: #fff; /* 背景颜色 */
  }
  /* 滚动条上下两端的按钮 */
  ::-webkit-scrollbar-button {
    display: none; /* 隐藏按钮 */
  }
  /* 滚动条滑块部分（即滑块本身） */
  ::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 滑块颜色 */
  }
.lefttree{
  width: 280px;
  border: 1px solid #ebeef5;
  margin-right: 20px;
  padding: 10px;
  position: relative;
  overflow-y: auto;
  .tabclick{
    transform: rotate(-90deg);
    position: absolute;
    top: calc((100vh - 300px) / 2);
    left: -55px;
    margin-top: 20px;
  }
  ::v-deep .el-tree{
    color: #676c70;
    background-color: #ffffff;
    .tree-text{
      font-size: 14px;
      display: inline-block;
      width: 130px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 溢出隐藏 */
      text-overflow: ellipsis; /* 超出部分用省略号表示 */
    }
  }
  ::v-deep.el-tree-node__content{
  &:hover{
    background-color: #cccccc;
  }
}
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    color: #459ffc !important;
    background-color: #f7f7f7 !important;
  }
  // ::v-deep .el-tree-node__expand-icon{
  //   position :absolute;
  //   left: 2%;
  // }
  ::v-deep .el-tree-node__label{
    padding-left: 15px;
  }
}
.playbackSettings{
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  .el-input{
    margin: 0 10px;
  }
  .el-button{
    margin: 0 10px;
  }
}
// .el-image {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
// }
</style>